<template>
    <el-container>
        <el-header>
            <HomeHeader/>
        </el-header>
        <el-container>
            <el-aside>
                <el-scrollbar style="background-color: transparent">
                    <HomeLeft/>
                </el-scrollbar>
            </el-aside>
            <el-container direction="vertical">
                <nav-tab class="navTab"></nav-tab>
                <el-main>
                    <el-scrollbar>
                        <RouterView/>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-container>
    </el-container>
</template>

<script setup lang="ts">
    import HomeLeft from "./components/menu.vue";
    import HomeHeader from "./components/header.vue";
    import NavTab from "./components/navTab.vue";
</script>

<style lang="scss" scoped>
  @import 'src/style/theme';

  .el-header {
    height: $home_header_height;
    background-color:  $home_header_bg;
  }

  .navTab {
    height: $home_nav_height;
  }

  .el-aside {
    height: $home_main_height;
    background-color: white;
    width: auto;
  }

  .el-main {
    height: $home_main_height;
    padding: 10px;
    background-color: $home_main_bg;
  }
</style>

<style lang="scss">
</style>